<template>
    <div>
        <div class="type_list">
            <div class="item" v-for="(item, index) in typeList" :key="index">
                <span>{{item.sortNo}}</span>
                <p>{{item.groupName}}</p>
                <div class="op">
                    <span class="edit" @click="editFn('open', item)">编辑</span>
                    <span class="del" @click="editFn('del', item)">删除</span>
                </div>
            </div>
        </div>
        <div class="submit" @click="editFn('open')">新增分类</div>
        <pub-lo-popup 
            title="新增/编辑分类" 
            ref="typeEdit" 
            type="center" 
            @cancel="editFn('cancel')"
            @confirm="editFn('confirm')"
            showCancel>
            <div>
                <div class="cell">
                    <div class="cell_item">
                        <span class="label">排序</span>
                        <div class="value">
                            <input type="text" v-model="editItem.sortNo" placeholder="排序" placeholder-class="placeholder">
                        </div>
                    </div>
                    <div class="cell_item">
                        <span class="label">分类名称</span>
                        <div class="value">
                            <input type="text" v-model="editItem.groupName" placeholder="分类名称" placeholder-class="placeholder">
                        </div>
                    </div>
                    <div class="h40"></div>
                </div>
            </div>
        </pub-lo-popup>
        
    </div>
</template>

<script>
import { editHouseGroups, getHouseGroups } from '@/request/house'
export default {
    name: "",
    components: {},
    data() {
        return {
            typeList: [],

            editItem: {
                id: '',
                sortNo: '',
                groupName : '',

            }
        }
    },
    onLoad() {
        this.getList()
    },
    methods: {
        getList() {
            getHouseGroups().then(res => {
                this.typeList = res.data
            })
        },
        async editFn(type, item) {
            if(type == 'open') {
                this.editItem.id = item && item.id || ''
                this.editItem.sortNo = item && item.sortNo || this.typeList.length + 1
                this.editItem.groupName = item && item.groupName || ''
                this.$refs.typeEdit.open()
            } else if(type == 'cancel') {
                this.$refs.typeEdit.close()
            } else if(type == 'del') {
                let action = await this.$interact.modal({
                    title: '提示',
                    content: '是否删除分类？',
                    showCancel: true
                })
                if(!action.confirm) return;
                editHouseGroups({
                    id: item.id,
                    delStatus: '01'
                }).then(res => {
                    this.$interact.toast(res.msg)
                    this.getList()
                    if(this.$prePage()) this.$prePage().getTypeList();
                })

                this.$refs.typeEdit.close()
            } else if(type == 'confirm') {
                if(!this.editItem.groupName) return this.$interact.toast('请输入分类名称')
                editHouseGroups({
                    id: this.editItem.id || void 0,
                    sortNo: this.editItem.sortNo,
                    groupName: this.editItem.groupName
                }).then(res => {
                    this.editFn('cancel')
                    this.$interact.toast(res.msg)
                    this.getList()
                    if(this.$prePage()) this.$prePage().getTypeList();
                })

            }
        },
        submit() {
                
        }
    }
}
</script>
<style lang="less" scoped>

.type_list{
    width: 700rpx;
    margin: 10rpx auto;
    padding-top: 20rpx;
    .item{
        width: 100%;
        background: #fff;
        border-radius: 10rpx;
        padding: 20rpx;
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;
        >span{
            margin-right: 20rpx;
        }
        p{
            flex: 1;
        }
        .op{
            font-size: 26rpx;
            span{
                margin-left: 10rpx;
                &:first-child{
                    color: #0c4abd;
                }
                &:last-child{
                    color: red;
                }
            }
        }
    }
}


.cell{
    background: #fff;
    font-size: 32rpx;
    .cell_item{
        width: 100%;
        min-height: 100rpx;
        border-bottom: 1px solid #eee;
        display: flex;
        align-items: center;
        padding: 0 20rpx;
        >span{
            width: 180rpx;
            &::after{
                content: "*";
                color: red;
            }
        }
        .value{
            flex: 1;
            input{
                width: 100%;
                height: 100rpx;
            }
            .city_name{
                width: 500rpx;
                height: 100rpx;
                display: flex;
                align-items: center;
            }
            .send_btn{
                font-size: 28rpx;
                color: #002a4f;
                line-height: 100rpx;
                &.disabled{
                    color: #999;
                }
            }
        }
    }
}

.submit{
    width: 690rpx;
    height: 90rpx;
    background: @mainColor;
    margin: 60rpx auto;
    .align(center);
    color: #fff;
    font-size: 34rpx;
    font-weight: bold;
    border-radius: 10rpx;
}

</style>